<template>
  <view>
    <u-subsection
      :list="listTag"
      :current="curNow"
      @change="sectionChange"
    ></u-subsection>

    <scroll-view
      class="list"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollTolower"
    >
      <view class="item" v-for="(item, index) in list" :key="index">
        <u-swipe-action>
          <u-swipe-action-item :options="options1" @click="onDelete(item.id)">
            <view class="swipe-action u-border-top u-border-bottom btn-right">
              <view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >订单号:{{ item.code }}</text
                  >
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >客户:{{ item.business.nickname }}</text
                  >
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >订单金额:{{ item.amount }}</text
                  >
                </view>
                <view class="swipe-action__content" v-if="item.expresscode">
                  <text class="swipe-action__content__text"
                    >物流单号:{{ item.expresscode }}</text
                  >
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >订单状态:{{ item.status_text }}</text
                  >
                </view>
              </view>

              <view class="btn">
                <u-button
                  text="详情"
                  type="primary"
                  size="small"
                  :customStyle="btnStyle"
                  @click="onInfo(item.id)"
                ></u-button>
                <u-button
                  v-if="item.status == 1"
                  text="发货"
                  type="success"
                  size="small"
                  @click="onExpress(item.id)"
                ></u-button>
                <u-button
                  v-if="item.status == -1 || item.status == -2"
                  text="退货审核"
                  type="warning"
                  size="small"
                  @click="onOut(item.id)"
                ></u-button>
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </scroll-view>

    <u-toast ref="uToast"></u-toast>
    <u-modal
      :show="show"
      :title="title"
      :content="content"
      @confirm="onConfirm"
      showCancelButton
      @cancel="show = !show"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      LoginAdmin: {},
      list: [],
      page: 1,
      limit: 10,
      listCount: 0,
      show: false,
      // 下拉刷新状态
      triggered: false,
      // 上拉加载状态
      finished: false,
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      // 删除id
      id: 0,
      title: "未知标题",
      content: "未知内容",
      listTag: ["全部", "未付款", "已支付", "已发货", "待评价", "售后"],
      curNow: 0,
      status: "",
      btnStyle: {
        marginBottom: "10px",
      },
    };
  },
  methods: {
    // 下滑加载
    onScrollTolower() {
      if (this.finished) {
        return;
      }
      this.page = this.page + 1;
      this.getList();
    },
    // 下拉刷新
    onRefresh() {
      // 开启下拉刷新
      this.triggered = true;
      // 加载状态为false
      this.finished = false;
      this.page = 1;
      this.list = [];
      this.getList();
    },
    // 获取列表
    async getList() {
      let data = {
        page: this.page,
        limit: this.limit,
        adminid: this.LoginAdmin.id,
        status: this.status,
      };
      let result = await this.$u.api.manage.productindex(data);

      this.triggered = false;

      if (result && result.code === 1) {
        this.list = result.data.list;
        this.list = this.list.concat(result.data.list);
      } else {
        this.finished = true;
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        return;
      }
    },
    // 点击标签
    sectionChange(index) {
      this.curNow = index;
      this.finished = false;
      this.page = 1;
      this.list = [];
      switch (index) {
        // 全部
        case 0:
          this.status = "";
          break;
        // 待付款
        case 1:
          this.status = "0";
          break;
        // 已支付
        case 2:
          this.status = "1";
          break;
        // 已发货
        case 3:
          this.status = "2";
          break;
        // 待评价
        case 4:
          this.status = "3";
          break;
        // 售后
        default:
          this.status = "4";
          break;
      }
      this.getList();
    },

    // 详情
    onInfo(id) {
      this.$u.route({
        url: "/pages/manage/productorder/info",
        params: {
          id: id,
        },
      });
    },

    // 发货
    onExpress(id) {
      this.$u.route({
        url: "/pages/manage/productorder/express",
        params: {
          id: id,
        },
      });
    },

    // 退货审核
    onOut(id) {
      this.$u.route({
        url: "/pages/manage/productorder/refund",
        params: {
          id: id,
        },
      });
    },
    // 点击删除
    onDelete(id) {
      this.id = id;
      this.show = !this.show;
      this.title = "删除客户";
      this.content = "是否删除该客户？";
      this.action = "onDelete";
    },
    // 确认删除
    async onConfirm() {
      let data = {
        id: this.id,
      };
      let result = await this.$u.api.manage.productdelete(data);

      if (result && result.code === 1) {
        this.$refs.uToast.show({
          type: "success",
          message: result.msg,
        });
        this.show = !this.show;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
        return;
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
      }
    },
  },
  onLoad() {
    this.LoginAdmin = uni.getStorageSync("admin") ?? {};

    this.getList();
  },
};
</script>

<style lang="scss">
.list {
  /* #ifdef H5 || APP-PULS */
  height: 90vh;
  /* #endif */

  /* #ifdef MP-WEIXIN */
  height: 94vh;
  /* #endif */
  overflow: hidden;
}

.btn {
  display: flex;
  align-items: center;
  margin-right: 2vw;
  flex-direction: column;
  justify-content: center;
}

.btn-right {
  display: flex;
  justify-content: space-between;
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 17rpx 0;

    &__text {
      font-size: 15px;
      color: $u-main-color;
      padding-left: 30rpx;
    }
  }
}
</style>
